<template>
    <div ref="filterGroupArea">
        <div v-if="filter.rules.length > 0" class="filter-area">
            <div class="condition" v-if="filter.rules.length > 1" v-bind:style="{top: conditionTop + 'px'}">
                <Button class="condition-button" v-on:click="switchConditon()" v-bind:style="{ marginTop: conditionMargin+'px', marginBottom: conditionMargin+'px' }">{{ filter.condition === 'AND' ? '且' : '或' }}</Button>
            </div>
            <div class="filter-items">
                <FilterItem v-for="(rule, index) in filter.rules" :key="index" v-bind:properties="properties" v-bind:index="index" v-bind:rules="filter.rules"></FilterItem>
            </div>
        </div>
        <Button v-if="filter.rules.length === 0 && show" v-on:click="addItem()">添加筛选</Button>
    </div>
</template>

<script>
    import FilterItem from "./FilterItem";
    export default {
        name: "FilterGroup",
        components: {FilterItem},
        // inject: ['filter'],
        props: {
            properties: Array,
            filter: Object,
            show: {
                type: Boolean,
                default: true
            }
        },
        data() {
            return {
                conditionMargin: 0,
                conditionTop: 26,
                normalItemHeight: 42,
                conditionButtonHeight: 28,
                padding: 10,
                filterItemHeight:[]
            }
        },
        computed: {

        },
        methods: {
            switchConditon: function() {
                if(this.filter.condition === 'AND') {
                    this.filter.condition = 'OR';
                } else {
                    this.filter.condition = 'AND';
                }
            },
            addItem: function() {
                this.filter.rules.push({
                    property: this.properties[0].name,
                    operator: '',
                    value: null,
                    values:[],
                });
                this.updateConditionHeight();
            },
            removeItem: function(index) {
                // this.properties.
                this.filter.rules.splice(index, 1);

                this.filterItemHeight.splice(index, 1);
                this.updateConditionHeight();
            },
            updateFilterItemHeight: function(index, height)  {
                this.filterItemHeight[index] = height;
                this.updateConditionHeight();
            },
            updateConditionHeight: function() {
                this.$nextTick(()=>{
                    if(this.filterItemHeight.length >= 2) {
                        this.conditionMargin = (this.$refs.filterGroupArea.offsetHeight - this.padding * 2 - (this.filterItemHeight[0] - this.padding) / 2 - (this.filterItemHeight[this.filterItemHeight.length-1] - this.padding) / 2 - this.conditionButtonHeight) / 2;
                    }
                    if(this.filterItemHeight.length >= 2) {
                        this.conditionTop = (this.filterItemHeight[0] - this.padding) / 2 + this.padding;
                    }
                });
            },

        },
    }
</script>

<style scoped>
    .filter-area {
        background-color: rgb(247, 247, 247);
        /*margin-left: 10px;*/
        padding-top: 10px;
        margin-bottom: 10px;
        display: block;
        padding-left: 50px;
        position: relative;
    }
    .condition {
        /*display: inline-block;*/
        width: 25px;
        position: absolute;
        border-width: 1px 0px 1px 1px;
        border-top-style: solid;
        border-bottom-style: solid;
        border-left-style: solid;
        border-top-color: rgb(229, 229, 229);
        border-bottom-color: rgb(229, 229, 229);
        border-left-color: rgb(229, 229, 229);
        border-image: initial;
        /*top: 26px;*/
        left: 26px;
        border-right-style: initial;
        border-right-color: initial;
        /*z-index: 999;*/
        display: block;
    }
    .condition-button {
        padding: 4px 7px;
        margin-left: -15px;
        border: 1px solid rgb(200, 200, 200);
        background-color: rgb(245, 245, 245);
        border-radius: 3px;
        cursor: pointer;
    }


/*.filter-items {*/
/*    display: inline-block;*/

/*}*/

</style>